<template>
	<view class="addBox">
		<view class="addGoods">
			<view class="info">
				<picker :range="data.productTypeList" range-key="name" @change="productTypeChange">
					<view class="infoTop select" style="margin-top: 0;">
						<text class="certainly">类型</text>
						<text>{{selectChange(data.productTypeList,data.obj.productType)}}</text>
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</picker>
				<picker v-if="data.obj.productType == 'HR' || data.obj.productType == 'JOB'" :range="data.workTypeList" range-key="name" @change="workTypeChange">
					<view class="infoTop select">
						<text class="certainly">工作</text>
						<text>{{selectChange(data.workTypeList,data.obj.workType)}}</text>
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</picker>
				<view class="imgs">
					<view class="top">
						图片(选填)
						<text>({{data.obj.mainFileIds.length}}/3)</text>
					</view>
					<shmily-drag-image :addImage="uploadImg" v-model="data.obj.mainFileIds" :number="3">

					</shmily-drag-image>
					<!-- 	<view class="list">
						<view class="listImg" :key="index" v-for="(item,index) in data.obj.mainFileIds">
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item" mode="aspectFill"></image>
							<image @tap="data.obj.mainFileIds.splice(index,1)" src="/static/img/ccc.png"
								mode="widthFix"></image>
						</view>

						<view v-if="data.obj.mainFileIds.length<3" class="zanwu" @click="uploadImg">
							<image src="/static/img/index/53.png" mode="widthFix"></image>
							上传图片
						</view>
					</view> -->
				</view>
				<picker :range="data.sellTypeList" range-key="name" @change="sellTypeChange">
					<view class="select">
						<text class="certainly">方式</text>
						<text>{{selectChange(data.sellTypeList,data.obj.sellType)}}</text>
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</picker>
				<view v-if="data.obj.sellType == 'OFFLINE'" @tap="handeAddress" class="select">
					<text class="certainly">定位</text>
					<text :style="data.obj.addressDetail?'color:#262626;':''">{{data.obj.addressDetail || '请选择'}}</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
				<picker :range="data.sendTypeList" range-key="name" @change="sendTypeChange">
					<view class="select">
						<text class="certainly">发货方式</text>
						<text>{{selectChange(data.sendTypeList,data.obj.sendType)}}</text>
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</picker>
				<view class="input">
					<text class="certainly">标题</text>
					<input v-model="data.obj.productName" type="text" placeholder="(必填)请输入" />
				</view>
				<view class="input" v-if="data.obj.sellType == 'OFFLINE'">
					<text class="certainly">简称</text>
					<input v-model="data.obj.productSimpleName" type="text" placeholder="请输入，用于地图展示" />
				</view>
				<view class="select" @tap="navTo('/pages/classificationManagement/index?isBool=true')">
					<text class="certainly">分类</text>
					<text>{{selectChange(data.categoryList,data.obj.categoryId)}}</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
				<!-- <picker :range="data.categoryList" range-key="categoryName" @change="categoryChange">
				
			</picker> -->

				<view class="select" @tap="data.show = true,data.num = 1">
					<text class="certainly">规格</text>
					<text>(选填)如分量、尺寸等</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
				<view class="view" v-for="(item,index) in data.obj.skuDTOS" :key="index">
					<view class="">
						<text>{{item.specName}}</text>
						<text>{{item.specValue}}</text>
					</view>
					<!-- <view class="input">
					<text>sku名称</text>
					<input v-model="item.skuName" type="text" placeholder="请输入" />
				</view> -->
					<view class="input">
						<text>价格</text>
						<input v-model="item.price" type="number" placeholder="请输入" />
						<!-- <image src="/static/img/index/72.png" mode="widthFix"></image> -->
					</view>
					<view class="input">
						<text>优惠价</text>
						<input v-model="item.preferentialPrice" type="number" placeholder="请输入" />
						<!-- <image src="/static/img/index/72.png" mode="widthFix"></image> -->
					</view>
					<view class="input">
						<text>限购数量</text>
						<input v-model="item.limitCount" type="number" placeholder="(选填)默认不限购" />
					</view>

					<view class="input">
						<text>库存</text>
						<input v-model="item.stockBalance" type="number" placeholder="(选填)默认库存不限" />
						<!-- <image src="/static/img/index/72.png" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="select" @tap="data.show = true,data.num = 2">
					<text class="certainly">属性</text>
					<text>(选填)如分量、尺寸等</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
				<view class="view" v-for="(item,index) in data.obj.propertyDTOS" :key="index">
					<view class="">
						<text>{{item.titleName}}</text>
						<text>{{item.values.map(item=>item.value).join('/')}}</text>
					</view>
				</view>
				<uni-section title="描述介绍(选填)" type="line" padding="0">
					<uni-easyinput type="textarea" v-model="data.obj.productDesc" maxlength="1500" placeholder="可简短向顾客介绍产品/服务"></uni-easyinput>
				</uni-section>

				<view v-show="false" class="switch">
					<text>必选</text>
					<u-switch v-model="data.obj.mustFlag" size="35"></u-switch>
				</view>
			</view>

			<u-popup z-index="10" :closeOnClickOverlay="false" round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
				<Specifications :list="data.obj.skuDTOS" @submit="specificationsSubmit" v-if="data.num == 1" @close="()=>{data.show = false}" />
				<Attribute :id="data.obj.id" :list="data.obj.propertyDTOS" @submit="attributeSubmit" v-else @close="()=>{data.show = false}" />
			</u-popup>
		</view>
		<view class="bot">
			<text @tap="openswitch">切换</text>
			<text v-show="!data.obj.id" @click="submit(1)">发布并添加下一个</text>
			<text @click="submit(2)">{{data.obj.id?'编辑并关闭':'发布并关闭'}}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import imgUpload from '@/utils/imgUpload.ts'
	import { ref } from 'vue'
	import { onLoad, onBackPress } from '@dcloudio/uni-app';
	import { listCategory, addOrUpdateProduct, productDetail } from '@/utils/api/goods'
	import Specifications from './components/specifications.vue'
	import Attribute from './components/attribute.vue'
	import { storeHasStore } from '@/utils/api/map'
	import { setDialogView } from '@/utils/dialogView.ts'
	import {
		reactive,
	} from 'vue';
	const data = reactive<any>({
		show: false,
		num: 1,
		httpUrl: getApp().globalData.baseUrl,
		categoryList: [],
		obj: { mustFlag: true, skuDTOS: [], productType: 'PRODUCT', mainFileIds: [], sellType: 'OFFLINE', categoryId: '', propertyDTOS: [] },
		sellTypeList: [{ id: 'OFFLINE', name: '线下' }, { id: 'ONLINE', name: '线上' }],
		productTypeList: [{ id: 'PRODUCT', name: '商品' }, { name: '服务', id: 'SERVICE' }],
		workTypeList: [{ id: 'FULL_TIME', name: '全职' }, { name: '兼职', id: 'PART_TIME_JOB' }],
		sendTypeList: [{id:'EMS',name:'快递物流'},{id:'SELF',name:'扫码核销'}]
	})
	uni.$off('addCategory')
	uni.$on('addCategory', (obj) => {
		data.categoryList = obj.categoryList;
		data.obj.categoryId = obj.id;
	})
	onLoad(({ id }) => {
		data.obj.id = id;

		uni.setNavigationBarTitle({
			title: '新增'
		})
		if (id) {
			uni.setNavigationBarTitle({
				title: '编辑'
			})
			productDetail({ data: { productId: id } }).then((res) => {
				const obj = {};
				const arr = [];
				res.data.propertyDTOS.map((item) => {
					if (obj[item.propertyName]) {
						obj[item.propertyName].push({ value: item.propertyValue })
					} else {
						obj[item.propertyName] = [{ value: item.propertyValue }]
					}
				})
				for (var i in obj) {
					arr.push({ titleName: i, values: obj[i] })
				}
				res.data.sellType = res.data.sellType.value;
				res.data.sendType=res.data.sendType?.value;
				res.data.productType = res.data.productType.value;
				res.data.mustFlag = res.data.mustFlag.value == 'Y' ? true : false;
				res.data.propertyDTOS = arr;
				data.obj = res.data;
			})
		}
	})
	onBackPress(() => {
		if (data.show) {
			data.show = false;
			return true;
		}
	})
	const navTo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const handeAddress = () => {
		uni.chooseLocation({
			success: (e) => {
				data.obj.longitude = e.longitude;
				data.obj.latitude = e.latitude;
				data.obj.addressDetail = e.address;
			},
		})
	}
	const productTypeChange = (e) => {
		if (e.detail.value == 2 || e.detail.value == 3) {
			if (data.productTypeList[e.detail.value].id != data.obj.productType) {
				data.obj.workType = 'FULL_TIME'
			}
		}
		data.obj.productType = data.productTypeList[e.detail.value].id;

	}
	const workTypeChange = (e) => {
		data.obj.workType = data.workTypeList[e.detail.value].id;
	}
	const sellTypeChange = (e) => {
		data.obj.sellType = data.sellTypeList[e.detail.value].id;
	}
	const sendTypeChange = (e)=>{
		data.obj.sendType = data.sendTypeList[e.detail.value].id;
	}
	const categoryChange = (e) => {
		data.obj.categoryId = data.categoryList[e.detail.value].id;
	}
	const uploadImg = () => {
		uni.showActionSheet({
			itemList:['拍摄','从相册选择'],
			success:(e)=>{
				let key = ''
				if(e.tapIndex == 0){
					key = 'camera'
				}else{
					key = 'album'
				}
				setDialogView(key == 'camera'?'CAMERA':'READ_EXTERNAL_STORAGE').then(res=>{
					if(res == 1){
						uni.chooseImage({
							count: 3 - data.obj.mainFileIds.length,
							sourceType: [key],
							success: (e : any) => {
								imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
									data.obj.mainFileIds = [...data.obj.mainFileIds, ...e.map((item : any) => { return item.fileId })];
								})
							}
						})
					}
				})
				
			}
		})
		
	}

	const openswitch = _ => {
		uni.showActionSheet({
			itemList: ['发墙墙', '发布需求(买方)', '发布赚钱'],
			success: (e) => {
				if (e.tapIndex == 0) {
					uni.navigateTo({
						url: '/pages/release/release'
					})
				} else if (e.tapIndex == 1) {
					uni.navigateTo({
						url: '/pages/releaseRequirements/index'
					})
				} else {
					storeHasStore().then((res) => {
						if (res.data) {
							uni.navigateTo({
								url: '/pages/addGoods/index'
							})
						} else {
							uni.navigateTo({
								url: '/pages/opeAStore/index'
							})
						}
					})
				}
			}
		})
	}

	const specificationsSubmit = (e) => {
		data.obj.skuDTOS = e;
	}
	const attributeSubmit = (e) => {
		data.obj.propertyDTOS = e;
	}
	const selectChange = (arr, id) => {
		const index = arr.map(item => item.id).indexOf(id);
		if (index == -1) {
			return '请选择'
		}
		return arr[index].name || arr[index].categoryName
	}
	const submit = (i) => {
		if (!data.obj.addressDetail && data.obj.sellType == 'OFFLINE') {
			uni.showToast({
				title: '请选择定位!',
				icon: 'none'
			})
			return
		}
		if (!data.obj.productName) {
			uni.showToast({
				title: '请填写标题!',
				icon: 'none'
			})
			return
		}

		if (!data.obj.productSimpleName && data.obj.sellType == 'OFFLINE') {
			uni.showToast({
				title: '请填写简称!',
				icon: 'none'
			})
			return
		}
		if (!data.obj.categoryId) {
			uni.showToast({
				title: '请选择分类!',
				icon: 'none'
			})
			return
		}
		if (!data.obj.skuDTOS.length) {
			uni.showToast({
				title: '请添加sku',
				icon: 'none'
			})
			return
		}
		if (!data.obj.propertyDTOS.length) {
			uni.showToast({
				title: '请添加属性',
				icon: 'none'
			})
			return
		}

		const obj = JSON.parse(JSON.stringify(data.obj));
		obj.mustFlag = obj.mustFlag ? 'Y' : 'N'
		obj.propertyDTOS = [];
		data.obj.propertyDTOS.map((item) => {
			item.values.map((item1) => {
				obj.propertyDTOS.push({ propertyName: item.titleName, propertyValue: item1.value })
			})
		})
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		addOrUpdateProduct({ data: obj }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: obj.id ? '编辑成功!' : '添加成功!',
					icon: 'none'
				})
				if (i == 2) {
					setTimeout(() => {
						uni.$emit('commodityManagement', 1)
						uni.navigateBack()
					}, 1000)
				}
			}
		})
	}
	listCategory().then((res) => {
		data.categoryList = res.data;
	})
</script>

<style lang="scss">
	.addBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		// padding-top: var(--status-bar-height);
		>.bot {
			display: flex;
			// margin-top: 50rpx;
			padding: 0 24rpx;

			text {
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				font-size: 32rpx;
				color: #262626;
				font-weight: bold;
			}

			text:nth-of-type(1) {
				color: #595959;
				width: 160rpx;
				background: #e5e5ff;
			}

			text:nth-of-type(2) {
				color: #595959;
				width: 248rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				background: #E4E2FC;
				color: #6B64D3;
			}

			text:nth-of-type(3) {
				color: #fff;
				flex: 1;
				margin-left: 20rpx;
				background: #6B64D3;
			}
		}
	}

	.addGoods {
		flex: 1;
		overflow: auto;
		background: #fff;
		padding: 24rpx 24rpx;

		.info {
			.certainly {
				&:before {
					content: '*';
					display: inline-block;
					color: #FF263F;
					margin-right: 5rpx;
				}
			}

			.input {
				padding: 24rpx 32rpx;
				display: flex;
				border-radius: 24rpx;
				background: #F4F6FA;
				align-items: center;
				margin-top: 24rpx;

				text {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;
				}

				input {
					flex: 1;
				}

				image {
					width: 32rpx;
				}
			}

			.switch {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;
			}

			.select {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				>text:nth-of-type(1) {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;
				}

				>text:nth-of-type(2) {
					flex: 1;
					color: #262626;
				}

				image {
					width: 25rpx;
				}
			}

			.view {
				padding: 24rpx 32rpx;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				.input {
					padding: 0 !important;
				}

				>view {
					margin-top: 40rpx;
					display: flex;
					align-items: center;

					>text:nth-of-type(1) {
						width: 150rpx;
						color: #262626;
						display: flex;
						align-items: center;
					}

					>text:nth-of-type(2) {
						flex: 1;
						color: #262626;
					}
				}

				>view:nth-of-type(1) {
					margin-top: 0;
				}
			}

			.imgs {
				.top {
					margin: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #595959;

					text {
						color: #595959;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;

					.listImg {
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						margin-right: 16rpx;
						position: relative;

						>image:nth-of-type(1) {
							width: 100%;
							height: 100%;
							border-radius: 16rpx;
						}

						>image:nth-of-type(2) {
							width: 40rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;
							z-index: 9;
						}
					}

					.zanwu {
						margin-right: 16rpx;
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						background: #F4F6FA;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #C4C4C4;
						font-size: 15rpx;

						image {
							width: 46rpx;
							margin-bottom: 5rpx;
						}
					}
				}
			}

			.input1 {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				text {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;
				}

				input {
					flex: 1;
				}

				.right {
					padding: 8rpx 12rpx;
					border-radius: 16rpx;
					background: #fff;
					color: #6B64D3;
				}
			}

			.genduo {
				display: flex;
				color: #FF8C00;
				margin-top: 8rpx;

				image {
					width: 36rpx;
				}
			}
		}
	}

	.head-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 88rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.title {
			width: 100%;
			flex: 1;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #333333;
			line-height: 48rpx;
			// text-align: center;
			font-style: normal;
			text-transform: none;
			margin-left: 269rpx;
		}

		.head-btn {
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}

		.head-card {
			position: absolute;
			top: 50rpx;
			right: 0rpx;
			width: 230rpx;
			z-index: 1000;

			.card-item {
				padding: 10rpx 0;
				border-bottom: 1rpx solid #E5E5E5;
			}

			.card-item:last-child {
				border-bottom: none
			}
		}
	}
</style>